<div class="flex flex-col justify-start items-start p-4">
  <h2 class="pac-page-title">
    {{ 'PAC.MENU.Email Template' | translate: {Default: "Email Template"} }}
  </h2>
  @if (organization()) {
    <div class="pac-page-subtitle">{{ 'PAC.MENU.ForOrganization' | translate: {Default: "For Organization"} }}:
      {{ organization()?.name }}
    </div>
  }
</div>

<div class="flex justify-start items-center px-4 py-2">
  <div class="font-semibold mr-2">{{'PAC.KEY_WORDS.Language' | translate: {Default: 'Language'} }}:</div>
  <ngm-tags [tags]="languages()" selectable large [(ngModel)]="languageCodes" />
</div>

<div class="w-full my-2 border-t border-solid border-divider-regular"></div>

<div class="flex-1 px-4 flex flex-col overflow-auto">
  <nav class="min-h-full content-start gap-4 px-4 pt-4 grow shrink-0 pb-4 overflow-auto"
    ngmDynamicGrid colWidth="280"
    box="content-box">
    <ngm-card-create
      [title]=" 'EMAIL_TEMPLATES_PAGE.AddTemplate' | translate: {Default: 'Add Template'} "
      [helpTitle]="'EMAIL_TEMPLATES_PAGE.AddTemplateHelp' | translate: {Default: 'Learn more about custom email template'}"
      helpUrl="/"
      (create)="newEmailTemplate()"
    />

    @for (item of templates(); track item.name) {
      <div class="ngm-card w-full min-h-[160px] p-4 group bg-gray-50 dark:bg-neutral-700 hover:bg-white dark:hover:bg-neutral-600">
        <div class="h-full flex flex-col cursor-pointer" (click)="open(item.name)">
          <div class="flex items-start gap-2">
            
            <div class="flex flex-col items-start">
              <div class="font-bold text-base">{{item.name}}</div>
              <p class="text-sm flex items-center gap-1 text-token-text-secondary opacity-80">{{item.subject.hbs}}</p>
            </div>
          </div>
          
          <div class="w-full my-1 text-sm line-clamp-3" [title]="item.html.mjml">
            {{item.html.mjml}}
          </div>
  
          <div class="flex-1"></div>
  
          <div class="flex justify-between items-end">
          </div>
        </div>
  
        <div class="absolute left-0 bottom-0 w-full p-1 hidden group-hover:flex">
  
          <div class="flex-1"></div>
  
          <button class="group flex items-center justify-center bg-gray-100 !bg-transparent h-8 w-8 !p-2 rounded-md border-none hover:!bg-black/5" type="button"
            #mt="cdkMenuTriggerFor"
            [cdkMenuTriggerFor]="menu"
            [cdkMenuTriggerData]="{item: item}"
            [class.active]="mt.isOpen()"
          >
            <i class="ri-more-line"></i>
          </button>
        </div>
      </div>
    }
  </nav>
</div>

@if (opened()) {
  <div class="absolute top-0 left-0 w-full h-full flex flex-col z-[900] bg-black/10 backdrop-blur-[2px]">
    <div class="shrink-0 w-full h-28" (click)="close()"></div>

    <div class="w-full flex-1 flex justify-start rounded-t-3xl bg-gray-50 overflow-auto">
      <pac-email-template />
    </div>
  </div>
}


<ng-template #newTempl>
  <div class="flex flex-col p-4 bg-components-card-bg rounded-2xl">
    <pac-language-selector class="w-48" [(ngModel)]="languageCode" />

    <ngm-select class="w-48"
      label="{{ 'PAC.KEY_WORDS.TemplateName' | translate: {Default: 'Template Name'} }}"
      [selectOptions]="templateNames()"
      valueKey="key"
      displayBehaviour="descriptionOnly"
      [(ngModel)]="name"
	  />

    <div class="w-full flex justify-end">
      <div ngmButtonGroup displayDensity="cosy">
        <button mat-raised-button color="primary" class="shrink-0 w-24"
          [disabled]="!languageCode || !name()"
          (click)="create()">
          <div class="flex items-center">
          {{ 'PAC.ACTIONS.Create' | translate: {Default: "Create"} }}
          </div>
        </button>
        </div>
    </div>
  </div>
  
</ng-template>

<ng-template #menu let-item="item">
  <div class="ngm-cdk-menu p-2" cdkMenu>
    <button cdkMenuItem class="ngm-cdk-menu-item p-1" (click)="edit(item.name)">
      <i class="ri-pencil-line mr-1"></i>
      <span>
        {{ 'PAC.ACTIONS.Edit' | translate: {Default: "Edit"} }}
      </span>
    </button>

    <button cdkMenuItem ngmAppearance="danger" class="ngm-cdk-menu-item p-1" (click)="delete(item.name)">
      <i class="ri-delete-bin-line mr-1"></i>
      <span>{{ 'PAC.ACTIONS.Delete' | translate: {Default: "Delete"} }}</span>
    </button>
  </div>
</ng-template>
